<template>
	<view class="background-color">
		<view class="personal-title">
			<view class="content-title">个人中心</view>
			<view class="personal-information">
				<view class="information">
					<view class="shopkeeper">
						<image src="https://cdn.uviewui.com/uview/swiper/swiper1.png" class="shop-image"
							@click="personalinformation"></image>
						<view class="keeper">
							<view class="keeper-name" @click="personalinformation">
								设备地道口
							</view>
							<view class="member-id">
								<view class="id-font" @click="personalinformation">
									会员ID:66945529
								</view>
								<view class="copy">
									复制
								</view>
							</view>
						</view>
					</view>
					<u-icon margin-left="" name="setting" size="28" @click="personalinformation"></u-icon>
				</view>
				<view class="balance">
					<view class="" v-for="(item,index) in balanceData" :key="index" @click="balance(item,index)">
						<view class="font-red">{{ item.number }}</view>
						<view class="">{{ item.name}}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 我的订单 -->
		<view class="my-orders">
			<view class="my-orders-top" @click="myorders">
				<view class="my-orders-font">我的订单</view>
				<view class="all-orders">
					全部订单
					<u-icon name="arrow-right" size="20"></u-icon>
				</view>
			</view>
			<u-line type="info"></u-line>
			<view class="orders-bottom">
				<view class="orders-bottom-box" v-for="(item,index) in ordersData" :key="index"
					@click="orderDetails(item,index)">
					<img :src="item.img" alt="" class="orders-image" />
					<view class="orders-bottom-font">{{item.title}}</view>
				</view>
			</view>
		</view>
		<!-- 我的功能 -->
		<view class="my-orders">
			<view class="my-orders-top">
				<view class="my-orders-font">我的功能</view>
			</view>
			<u-line type="info"></u-line>
			<view class="function-bottom">
				<view class="function-bottom-box" v-for="(item,index) in functionData" :key="index"
					@click="myFunction(item,index)">
					<img :src="item.img" alt="" class="funciton-image" />
					<view class="funciton-bottom-font">{{item.title}}</view>
				</view>
			</view>
		</view>
		<!-- 好物优选 -->
		<view class="stuff-optimization">
			<view class="stuff-title">
				<scroll-view class="scroll-view_H" scroll-x="true" scroll-left="120">
					<view class="" style="flex-shrink: 0;display: flex;">
						<view class="stuff-title-font" v-for="(item,index) in optimizationData" :key="index"
							@click="changeStyle(index)">
							<view class="stuff-title-top"
								:class="optimization == index? 'stuff-title--top-active' : 'stuff-title-top' ">
								{{ item.topfont }}
							</view>
							<view class="stuff-title-bottom"
								:class="optimization == index? 'stuff-title-bottom-active' : 'stuff-title-bottom' ">
								{{ item.bottomfont }}
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="stuff-content">
				<view class="stuff-content-box" v-for="(item,index) in stuffData" :key="index" @click="goodPreferred">
					<image :src="item.src" class="stuff-content-image"></image>
					<view class="commodity-product">{{ item. name}}</view>
					<view>
						<text class="stuff-content-fontleft">￥{{ item.discount }}</text>
						<text class="stuff-content-fontright">￥{{ item.original }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 存放余额、收藏、优惠卷的数据
				balanceData: [{
						number: '0.00',
						name: '余额',
						url: '/pages/index/balance/balance'
					},
					{
						number: '0',
						name: '收藏',
						url: '/pages/index/collection/collection'
					},
					{
						number: '0',
						name: '优惠卷',
						url: '/pages/index/myCoupons/myCoupons'
					},
				],
				// 我的订单数据
				ordersData: [{
						img: '../../static/logo.png',
						title: '待付款',
						url: '/pages/index/myOrders/myOrders'
					},
					{
						img: '../../static/logo.png',
						title: '待发货',
						url: '/pages/index/myOrders/myOrders'
					},
					{
						img: '../../static/logo.png',
						title: '待收货',
						url: '/pages/index/myOrders/myOrders'
					},
					{
						img: '../../static/logo.png',
						title: '商品评价',
						url: '/pages/index/productReviews/productReviews'
					},
					{
						img: '../../static/logo.png',
						title: '售后',
						url: '/pages/index/afterSales/afterSales'
					}
				],
				functionData: [{
						img: '../../static/logo.png',
						title: '商家入驻',
						url: '/pages/index/merchantSettled/merchantSettled'
					},
					{
						img: '../../static/logo.png',
						title: '会员等级',
						url: '/pages/index/membershipTiers/membershipTiers'
					},
					{
						img: '../../static/logo.png',
						title: '分销推广',
						url: '/pages/index/distributionPromotion/distributionPromotion'
					},
					{
						img: '../../static/logo.png',
						title: '钱包余额',
						url: '/pages/index/balance/balance'
					},
					{
						img: '../../static/logo.png',
						title: '我的优惠券',
						url: '/pages/index/myCoupons/myCoupons'
					},
					{
						img: '../../static/logo.png',
						title: '收货地址',
						url: '/pages/index/deliveryAddress/deliveryAddress'
					},
					{
						img: '../../static/logo.png',
						title: '我的收藏',
						url: '/pages/index/collection/collection'
					},
					{
						img: '../../static/logo.png',
						title: '帮助中心',
						url: '/pages/index/help/help'
					},
					{
						img: '../../static/logo.png',
						title: '联系客服',
						url: '/pages/index/contactCustomerService/contactCustomerService'
					},
					{
						img: '../../static/logo.png',
						title: '消息',
						url: '/pages/index/message/message'
					},
					{
						img: '../../static/logo.png',
						title: '邀请海报',
						url: '/pages/index/InvitationPoster/InvitationPoster'
					},
				],
				// 好物优选数据
				optimizationData: [{
						topfont: '好物优选',
						bottomfont: '精选推荐'
					},
					{
						topfont: '新品好物',
						bottomfont: '24小时热销'
					},
					{
						topfont: '海外进口',
						bottomfont: '国际进口商品'
					},
					{
						topfont: '热销榜单',
						bottomfont: '热销榜单'
					},
					{
						topfont: '测试001',
						bottomfont: '123'
					},
				],
				// 好物优选商品数据
				stuffData: [{
						src: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
						name: 'iphone12mini',
						discount: '4369',
						original: '7760'
					},
					{
						src: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
						name: 'Samsung SM-N9860 骁龙865+三星note20官方旗...',
						discount: '4369',
						original: '7760'
					},
					{
						src: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
						name: 'iphone12mini',
						discount: '4369',
						original: '7760'
					},
					{
						src: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
						name: 'iphone12mini',
						discount: '4369',
						original: '7760'
					},
					{
						src: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
						name: 'iphone12mini',
						discount: '4369',
						original: '7760'
					},
					{
						src: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
						name: 'iphone12mini',
						discount: '4369',
						original: '7760'
					},
					{
						src: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
						name: 'iphone12mini',
						discount: '4369',
						original: '7760'
					},
					{
						src: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
						name: 'iphone12mini',
						discount: '4369',
						original: '7760'
					},
					{
						src: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
						name: 'iphone12mini',
						discount: '4369',
						original: '7760'
					},
					{
						src: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
						name: 'iphone12mini',
						discount: '4369',
						original: '7760'
					},
					{
						src: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
						name: 'iphone12mini',
						discount: '4369',
						original: '7760'
					},
				],
				// 好物优选
				optimization: '0',
			}
		},
		methods: {
			// 好物优选点击亮高
			changeStyle(index) {
				this.optimization = index
			},
			// 点击跳转个人信息页面
			personalinformation() {
				uni.navigateTo({
					url: '/pages/index/personalInformation/personalInformation'
				})
			},
			// 我的订单跳转页面
			myorders() {
				uni.navigateTo({
					url: '/pages/index/myOrders/myOrders'
				})
			},
			// v-for循环的余额、收藏和优惠卷的跳转
			balance(item, index) {
				uni.navigateTo({
					url: item.url
				})
			},
			// 我的功能跳转事件
			myFunction(item, index) {
				if (item.url) {
					uni.navigateTo({
						url: item.url
					})
				}
			},
			// 
			orderDetails(item, index) {
				uni.navigateTo({
					url: item.url
				});
			},
			// 跳转商品详情
			productDetails() {
				uni.navigateTo({
					url: '/pages/index/productDetails/productDetails'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.background-color {
		background-color: rgb(246, 246, 246);
	}

	.personal-title {
		height: 380rpx;
		background-color: rgb(237, 83, 73);
		text-align: center;
		padding: 30rpx 20rpx 0rpx 20rpx;
	}

	.content-title {
		color: white;
		font-size: 35rpx;
	}

	.personal-information {
		margin-top: 20rpx;
		background-color: #fff;
		padding: 20rpx 20rpx 20rpx 20rpx;
		z-index: 1;
	}

	.information {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-right: 20rpx;
	}

	.shopkeeper {
		display: flex;
		align-items: center;
		padding: 40rpx 0rpx 30rpx 0rpx;
		background-color: #fff;
	}

	.keeper {
		margin-left: 20rpx;
	}

	.keeper-name {
		width: 200rpx;
		font-size: 40rpx;
		font-weight: bold;
	}

	.member-id {
		display: flex;
		align-items: center;
		margin-top: 20rpx;
	}

	.id-font {
		border-radius: 20rpx;
		border: 1px solid #ccc;
		padding: 5rpx 10rpx 5rpx 10rpx;
	}

	.copy {
		color: red;
		margin-left: 40rpx;
	}

	.shop-image {
		width: 100rpx;
		height: 100rpx;
		border-radius: 100%;
	}

	.balance {
		display: flex;
		justify-content: space-between;
		margin-top: 30rpx;
		text-align: center;
		margin-left: 50rpx;
		margin-right: 50rpx;
	}

	.font-red {
		color: red;
	}

	.my-orders {
		margin-top: 20rpx;
		background-color: #fff;
		padding: 20rpx 40rpx 20rpx 20rpx;
	}

	.my-orders-top {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 20rpx;
	}

	.my-orders-font {
		font-size: 40rpx;
	}

	.all-orders {
		display: flex;
		color: #767a82;
	}

	.orders-bottom {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0rpx 20rpx 0rpx 20rpx;
		text-align: center;
		margin-top: 20rpx;
	}

	.function-bottom {
		display: flex;
		// justify-content: space-between;
		flex-wrap: wrap;
		align-items: center;
		// padding: 0rpx 20rpx 0rpx 0rpx;
		text-align: center;
		margin-top: 20rpx;
	}

	.function-bottom-box {
		width: 170rpx;
		margin-top: 15rpx;
	}

	.funciton-image {
		width: 80rpx;
		height: 80rpx;
	}

	.funciton-bottom-font {
		text-align: center;
	}

	.orders-image {
		width: 80rpx;
		height: 80rpx;
	}

	.orders-bottom-font {
		text-align: center;
	}

	// 好物优选样式
	.stuff-optimization {
		width: 100%;
	}
	
	.stuff-title {
		width: 95%;
		display: flex;
		padding: 20rpx;
	}
	
	.stuff-title-font {
		margin-right: 5%;
	}
	
	.stuff-title-top {
		font-size: 40rpx;
		text-align: center;
	}
	
	.stuff-title--top-active {
		font-weight: bold;
		background: linear-gradient(red, white, white);
	}
	
	.stuff-title-bottom {
		text-align: center;
		color: #ccc;
	}
	
	.stuff-title-bottom-active {
		color: black;
	}
	
	.stuff-content {
		width: 95%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		background-color: #F6F6F6;
		padding: 20rpx;
	}
	
	.stuff-content-box {
		width: 48%;
		background-color: #fff;
		margin: 20rpx 0 0 0;
	}
	
	.commodity-product {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	
	.stuff-content-image {
		width: 100%;
	}
	
	.stuff-content-fontleft {
		color: red;
		font-size: 30rpx;
	}
	
	.stuff-content-fontright {
		color: #ccc;
		text-decoration: line-through;
	}
	
	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}
</style>